import React,{useState,useEffect, Fragment, useMemo} from 'react'
import { useHistory } from 'react-router-dom';
import {Spin} from 'antd'
import {Pagination,Icon,ListView,} from 'antd-mobile'
import {request} from '../../../../network/request'



const SearchNews = ({tab,keyword}) =>{
    
    //useState()括号中的表达式只执行一次，即初始化值只执行一次，不能放置变量如props.tab
    let history = useHistory()
    const [isloading,setisloading] = useState(false)    
    const [news,setnews] = useState([])
    const [totalpage,settotalpage] = useState(0)
    const [page,setpage] = useState(1)
    const [newskeyword,setkeyword] = useState('')

    const dataSource = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      });
    
    
    //props改变时重新设置tab didmount=>didupdate
    useEffect(()=>{
      console.log(tab.data);
      setnews(tab.data)
      setkeyword(keyword)
    },[])
    useEffect(()=>{
  

      
      settotalpage(tab.totalpage)
     
      
       
    },)

    const row = (item,_,i) => {
        
      
        return (    
           
          <div key={i} style={{ padding: '0 15px',border:'1px dotted #F6F6F6' }} onClick={()=>onnewsclick(item)}> 
            <div
              style={{
                fontWeight: 'bold',
                lineHeight: '50px',
                color: '#28527a',
                fontSize: 18,
                lineHeight: 2.5,
                borderBottom: '1px solid #F6F6F6',
              }}
            >{item.chtitle}</div>
            <div className="item_content" style={{  display: 'flex' }}>
               
              <div style={{ lineHeight: 2 }}>
                <div style={{ height: '115px',marginBottom: '8px',  overflow:'auto',textOverflow:'ellipsis',width:'300px' }}>{item.chcontent}</div>
                <div ></div>
                <div style={{ fontSize:'10px' }}><span>{item.media} {item.author}({item.country}) {item.date}</span></div>
              </div>
            </div> 
          </div>
        );
      };
    
    const separator = (sectionId,row_num) => {
    
            return (
            <div 
                key ={row_num}
                style={{
                backgroundColor: '#F5F5F9',
                height: 8,
                borderTop: '1px solid #ECECED',
                borderBottom: '1px solid #ECECED',
                }}
            />)
    }

    const onnewsclick = (value) =>{
      
       history.push({pathname:'/main/home/news/detail',state:{newsinfo:value}})
      }

    const onpchange_news = (page)=>{
        console.log(page);
        setisloading(true)
        request({
            url:`/search/${newskeyword}/${page}/15`
        }).then(res=>{
            console.log(res.data.article.content);
            setnews(res.data.article.content) 
            setisloading(false)
            setpage(page)
        })
        
        
        
    }

    //只有keyword改变时，才重新渲染该组件

    const search_news_memo = useMemo(()=> 
    <Fragment>
      <div className="search-news">
          <Spin spinning = {isloading}>
                  <ListView
                      dataSource={dataSource.cloneWithRows(news)}                           
                      initialListSize={10}
                      pageSize={15}
                      renderRow={(rowData,id1,i)=>row(rowData,id1,i)}
                      renderSeparator={separator}
                      style={{
                          position:'absolute',
                        
                          width:'100vw',
                          height:'calc(100vh - 212px)',
                          overflow:'auto'               
                      }}
                      onEndReachedThreshold={15}
              />
          </Spin>     
      </div>
      <Pagination total={totalpage}
                  className="custom-pagination-with-icon"
                  current={page}
                  locale={{
                      prevText: (<span className="arrow-align"><Icon type="left" />上一页</span>),
                      nextText: (<span className="arrow-align">下一页<Icon type="right" /></span>),
                  }}
                  style={{
                      position:'absolute',
                      bottom: '0px',
                      width:'100%'
                                
                  }}
                  onChange={onpchange_news}
                  
                  />
    </Fragment>,[newskeyword,page])

  
    


    return <Fragment>
    <div className="search-news">
        <Spin spinning = {isloading}>
                <ListView
                    dataSource={dataSource.cloneWithRows(news)}                           
                    initialListSize={10}
                    pageSize={15}
                    renderRow={(rowData,id1,i)=>row(rowData,id1,i)}
                    renderSeparator={separator}
                    style={{
                        position:'absolute',
                      
                        width:'100vw',
                        height:'calc(100vh - 212px)',
                        overflow:'auto'               
                    }}
                    onEndReachedThreshold={15}
            />
        </Spin>     
    </div>
    <Pagination total={totalpage}
                className="custom-pagination-with-icon"
                current={page}
                locale={{
                    prevText: (<span className="arrow-align"><Icon type="left" />上一页</span>),
                    nextText: (<span className="arrow-align">下一页<Icon type="right" /></span>),
                }}
                style={{
                    position:'absolute',
                    bottom: '0px',
                    width:'100%'
                              
                }}
                onChange={onpchange_news}
                
                />
  </Fragment>
       
}

export default SearchNews